<template>
	<view class="testPage">
		<!-- 导航占位 -->
		<view class="nav">
			<text>智能选岗</text>
			<text>综合</text>
			<text>课程</text>
			<text>就业</text>
			<text class="active">测评</text>
			<text>法律援助</text>
		</view>
		<view class="testMain">
			
			<!-- banner图 -->
			<view class="testBanner">
				<image src="@/static/test/testBanner.png" mode="aspectFit"></image>
			</view>
			
			<!-- 测评列表白色区域 -->
			<view class="testList">
				<!-- 列表内容区 -->
				<view class="testListCon">
					<!-- 列表的每一项 -->
					<template
						v-for="(item,index) in data.testList"
						:key="index"
					>
						<view
							class="testListItem"
							@tap="showModalFn()"
						>
							<image :src="item.imgUrl" mode="aspectFit"></image>
							<text>{{item.text}}</text>
						</view>
					</template>
					
					<Modal 
						v-model:visible="showModal" 
						@confirm="handleConfirm"
					>
						<text>敬请期待！！！</text>
					</Modal>
				</view>
				
				<!-- 没有更多 -->
				<view class="noMore">没有更多了哟~</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import Modal from './components/Modal.vue';
	
	onLoad((options: { id?: string }) => {
	  console.log('页面加载，参数:', options)
	  // fetchContentData 方法名  行测：参数
	  // fetchContentData('行测')
	})
	
	const ipt_content = ref("");
	const showModal = ref(false);
	
	
	
	// 数据
	const data = ref({
		testList:[
			{
				id:1,
				imgUrl:'/static/test/testListPic_01.png',
				text:'职业同一性量表(VIM)'
			},
			{
				id:2,
				imgUrl:'/static/test/testListPic_02.png',
				text:'职业延迟满足量表(ODGS)'
			},
			{
				id:3,
				imgUrl:'/static/test/testListPic_03.png',
				text:'Aitken拖延行为问卷(API)'
			},
			{
				id:4,
				imgUrl:'/static/test/testListPic_04.png',
				text:'变革型领导问卷(TLQ)'
			},
			{
				id:5,
				imgUrl:'/static/test/testListPic_05.png',
				text:'心理授权问卷'
			},
			{
				id:6,
				imgUrl:'/static/test/testListPic_06.png',
				text:'大学生一般学业情绪调查问卷'
			},
			{
				id:7,
				imgUrl:'/static/test/testListPic_07.png',
				text:'情绪调节自我效能感量表(SRESE)'
			},
			{
				id:8,
				imgUrl:'/static/test/testListPic_08.png',
				text:'人际关系综合诊断量表'
			},
			{
				id:9,
				imgUrl:'/static/test/testListPic_09.png',
				text:'卡特尔十六种人格因素测验'
			},
			{
				id:10,
				imgUrl:'/static/test/testListPic_10.png',
				text:'IQ测试'
			},
			{
				id:11,
				imgUrl:'/static/test/testListPic_11.png',
				text:'霍鋃呆兰德职业兴趣测试sds版(60题)'
			},
			{
				id:12,
				imgUrl:'/static/test/testListPic_12.png',
				text:'艾森克人格问卷(EPQ)'
			},
			{
				id:13,
				imgUrl:'/static/test/testListPic_13.png',
				text:'MBTI性格测试(28题)'
			},
			{
				id:14,
				imgUrl:'/static/test/testListPic_14.png',
				text:'职业使命感量表(CCS)'
			},
			{
				id:15,
				imgUrl:'/static/test/testListPic_15.png',
				text:'性向测验'
			},
			{
				id:16,
				imgUrl:'/static/test/testListPic_16.png',
				text:'明尼苏达多相人格测验'
			},
			{
				id:17,
				imgUrl:'/static/test/testListPic_17.png',
				text:'OMA 指数测试'
			},
			{
				id:18,
				imgUrl:'/static/test/testListPic_18.png',
				text:'自信心测试'
			}
		]
	})
	
	const handleConfirm = () => {
	  uni.showToast({
	    title: '操作已确认',
	    icon: 'success'
	  });
	};
	
	const showModalFn = () => {
	  // currentModalId.value = id;
	  showModal.value = true;
	};
</script>

<style>
/* 导航占位里的样式-合代码可删 */
.nav {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #fff;
	color: #7e8892;
}
.active {
	color: #000;
	font-size: 38rpx;
}

/* 测评主体区 */
.testMain {
	padding: 0 35rpx 50rpx 35rpx;
}

/* banner图-容器 */
.testBanner {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* background: pink; */
	margin-bottom: 40rpx;
}
/* banner图-样式 */
.testBanner image{
	width: 100%;
	height: 310rpx;
	/* background: greenyellow; */
}

/* 测评列表区域-白色区域 */
.testList {
	width: 100%;
	background: #fff;
	border-radius: 26rpx;
	padding: 30rpx;
	/* height: 1000rpx; */
}

/* 列表内容区 */
.testListCon {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50rpx;
}
/* 列表的每一项 */
.testListItem {
	width: 48%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* background: pink; */
}
.testListItem image {
	width: 100%;
	height: 160rpx;
	margin-bottom: 30rpx;
	/* background: pink; */
}
.testListItem text {
	height: 100rpx;
	padding-left: 20rpx;
	font-size: 26rpx;
	/* background: greenyellow; */
}
/* 没有更多了 */
.noMore {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ccc;
	font-size: 30rpx;
}
</style>
